<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Circular Bar Meter (2)</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Circular Bar Meter (2)</p>
<hr class="separator">
<div class="content">
<img src="images/circularbarmeter20.png" width='110' height='110'>&nbsp;&nbsp;<img src="images/circularbarmeter21.png" width='110' height='110'>&nbsp;&nbsp;<img src="images/circularbarmeter22.png" width='110' height='110'>&nbsp;&nbsp;<img src="images/circularbarmeter23.png" width='110' height='110'>&nbsp;&nbsp;<img src="images/circularbarmeter24.png" width='110' height='110'>&nbsp;&nbsp;<img src="images/circularbarmeter25.png" width='110' height='110'>&nbsp;&nbsp;<img src="images/circularbarmeter26.png" width='110' height='110'>&nbsp;&nbsp;<img src="images/circularbarmeter27.png" width='110' height='110'>
<br><br>
This example demonstrates circular bar meters in segmented style.<br><br>
This example is similar to the <a href="circularbarmeter.htm">Circular Bar Meter</a> example except that the ring sectors are segmented.
</div>
<p class="heading1a">Source Code Listing</p>
<div class="content">
<b>[JSP Version]</b> jspdemo/circularbarmeter2.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%!
// Function to create the demo charts
void createChart(WebChartViewer viewer, int chartIndex)
{
    // The value to display on the meter
    double value = 85;

    // The meter radius and angle
    int radius = 50;
    double angle = value * 360.0 / 100;

    // Create an AngularMeter with transparent background
    AngularMeter m = new AngularMeter(radius * 2 + 10, radius * 2 + 10, Chart.Transparent);

    // Set the center, radius and angular range of the meter
    m.setMeter(m.getWidth() / 2, m.getHeight() / 2, radius, 0, 360);

    // For circular bar meters, we do not need pointer or graduation, so we hide them.
    m.setMeterColors(Chart.Transparent, Chart.Transparent, Chart.Transparent);
    m.setCap(0, Chart.Transparent);

    // In this example, the circular bar has 20 segments
    int segmentCount = 20;

    // The angular step
    double angleStep = 360.0 / segmentCount;

    // The gap between segments is 4.5 degrees
    double angleGap = 4.5;

    //
    // This example demonstrates several coloring styles
    //

    // Thd default fill and blank colors
    int fillColor = 0x336699;
    int blankColor = 0xeeeeee;

    if (chartIndex &gt;= 4) {
        // Use dark background style
        m.setColors(Chart.whiteOnBlackPalette);
        fillColor = 0x6699ff;
        blankColor = 0x222222;
    }

    if (chartIndex % 4 == 1) {
        // Alternative fill color
        fillColor = 0x00ee33;
    } else if (chartIndex % 4 == 2) {
        // Use a smooth color scale as the fill color
        int[] smoothColorScale = {0, 0x0022ff, 15, 0x0088ff, 30, 0x00ff00, 55, 0xffff00, 80,
            0xff0000, 100, 0xff0000};
        fillColor = m.getDrawArea().angleGradientColor(m.getWidth() / 2, m.getHeight() / 2, 0, 360,
            radius, radius - 20, smoothColorScale);
    } else if (chartIndex % 4 == 3) {
        // Use a step color scale as the fill color
        int[] stepColorScale = {0, 0x0044ff, 20, 0x00ee00, 50, 0xeeee00, 70, 0xee0000, 100};
        fillColor = m.getDrawArea().angleGradientColor(m.getWidth() / 2, m.getHeight() / 2,
            -angleGap / 2, 360 - angleGap / 2, radius, radius - 20, stepColorScale);
    }

    //
    // Now we draw the segments of the bar meter
    //

    // The segment that contains the value
    int currentSegment = (int)(angle / angleStep);

    // Segments after the current segment is colored with the blank color
    for(int i = currentSegment + 1; i &lt; segmentCount; ++i) {
        m.addRingSector(radius, radius - 20, i * angleStep, (i + 1) * angleStep - angleGap,
            blankColor);
    }

    // Segments before the current segment is colored with the fill color
    for(int i = 0; i &lt; currentSegment; ++i) {
        m.addRingSector(radius, radius - 20, i * angleStep, (i + 1) * angleStep - angleGap,
            fillColor);
    }

    // Segment that contains the angle will be partially filled and partially blank. We need to
    // adjust the angle to compensated for the angle gap.
    double adjustedAngle = currentSegment * angleStep + (angle - currentSegment * angleStep) * (1 -
        angleGap / angleStep);

    // The blank part of the segment
    if ((currentSegment + 1) * angleStep &gt; angle) {
        m.addRingSector(radius, radius - 20, adjustedAngle, (currentSegment + 1) * angleStep -
            angleGap, blankColor);
    }

    // The filled part of the segment.
    if (angle &gt; currentSegment * angleStep) {
        m.addRingSector(radius, radius - 20, currentSegment * angleStep, adjustedAngle, fillColor);
    }

    // Add a label at the center to display the value
    m.addText(m.getWidth() / 2, m.getHeight() / 2, m.formatValue(value, "{value}"), "Arial", 25,
        Chart.TextColor, Chart.Center).setMargin(0);

    // Output the chart
    viewer.setChart(m, Chart.SVG);
}
%&gt;
&lt;%
// This example includes 8 charts
WebChartViewer[] viewers = new WebChartViewer[8];
for (int i = 0; i &lt; viewers.length; ++i) {
    viewers[i] = new WebChartViewer(request, "chart" + i);
    createChart(viewers[i], i);
}
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Circular Bar Meters (2)&lt;/title&gt;
    &lt;!-- Include ChartDirector Javascript Library to support chart interactions --&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
    &lt;div style="font:bold 18pt verdana;"&gt;
        Circular Bar Meters (2)
    &lt;/div&gt;
    &lt;hr style="border:solid 1px #000080; background:#000080" /&gt;
    &lt;div style="font:10pt verdana; margin-bottom:1.5em"&gt;
        &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ****** Here are the chart images ****** --&gt;
    &lt;%
        for (int i = 0; i &lt; viewers.length; ++i) {
            out.write(viewers[i].renderHTML(response));
            out.write(" ");
        }
    %&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div>
</div>
<br><hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
